/**
 * SKU如何冲泡
 * skuHowTo.less
 * -----------------------------------
 * 18/05/21 Jerry 新增
 */

@import '../../../variables.less';
@import '../../../component/common/skuCommentsView/skuCommentsView.less';

.sku-how-to {

  .steps {
    padding: @text-margin-xl 0;
    background-color: @color-nav;
    border-bottom: @border-gray-light-5;

    .step-item {
      .flex-center;
      height: 100rpx;

      .step-ico {
        .flex-end;
        width: 40%;

        image {
          .ico-s;
          margin-right: @text-margin-xl;
        }
      } /* .step-ico */

      .step-text {
        width: 60%;

      } /* .step-text */

    } /* .step-item */

  } /* .steps */

  .timer-wrapper {
    position: relative;
    text-align: center;

    .timer-title {
      .flex-center;
      height: 250rpx;
      font-size: 80rpx;

      text {
        margin: 0 @text-margin-xl;
        font-size: 80rpx;
      }

    } /* .timer-title */

    .timer-bg {
      .flex-center;
      margin: 0 auto;

      canvas {
        width:220px;
        height: 220px;
      }

    } /* .timer-bg */

    .timer-val { 
      .flex-center;
      position: absolute;
      top: 250rpx;
      left: 0;
      right: 0;
      z-index: 1;

      canvas {
        width: 220px;
        height: 220px;
      }

    } /* .timer-val */

    .timer-waiting {
      .flex-center;
      position: absolute;
      top: 250rpx;
      left: 0;
      right: 0;
      height: 220px;
      font-size: 45rpx;
      color: @color-text;
      z-index: 2;
    } /* .timer-waiting */

    .timer-op {
      .flex-center;
      position: absolute;
      top: 250rpx;
      left: 0;
      right: 0;
      height: 220px;
      font-size: 45rpx;
      color: @color-primary;
      z-index: 2;
    } /* .timer-op */

    .timer-arrow {
      .flex-center;
      position: absolute;
      top: 360rpx;
      left: 0;
      right: 0;

      image {
        .ico-m;
      }

    } /* .timer-arrow */

    .timer-tip {
      .flex-center;
      position: absolute;
      top: 500rpx;
      left: 0;
      right: 0;
      color: @color-primary;

    } /* .timer-tip */

  } /* .timer-wrapper */

}
